<template>
  <div class="pagination">
    <div class="pagination pageOpt" :class="{'a': currentIndex !== 1 && currentIndex !== 0}" @click="prePage">
      <
    </div>
    <div class="pagination" v-if="currentIndex > 6">
      <div class="pagination" @click="sizePage(index)" v-for="index in 2" :key="'>6' + index">
        {{index}}
      </div>
      <div class="pagination">
        ...
      </div>
      <div class="pagination" @click="sizePage(currentIndex - 2)">
        {{currentIndex - 2}}
      </div>
      <div class="pagination" @click="sizePage(currentIndex - 1)">
        {{currentIndex - 1}}
      </div>
    </div>
    <div v-else class="pagination">
      <div class="pagination" @click="sizePage(index)" v-for="index in currentIndex -1" :key="'<6' + index">
        {{index}}
      </div>
    </div>
    <div class="active pagination">
      {{currentIndex}}
    </div>
    <div class="pagination" v-if="totalIndex - currentIndex > 5">
      <div class="pagination" @click="sizePage(currentIndex + index)" v-for="index in 2" :key="'last>6' + index">
        {{currentIndex + index}}
      </div>
      ...
      <div class="pagination" @click="sizePage(totalIndex - 1)">
        {{totalIndex - 1}}
      </div>
      <div class="pagination" @click="sizePage(totalIndex)">
        {{totalIndex}}
      </div>
    </div>
    <div v-else class="pagination">
      <div class="pagination" @click="sizePage(currentIndex + index)" v-for="index in totalIndex - currentIndex" :key="'last' + index">
        {{currentIndex + index}}
      </div>
    </div>
    <div class="pagination pageOpt" :class="{'a': currentIndex !== totalIndex}" @click="nextPage">
      >
    </div>
  </div>

</template>

<script>
  export default {
    name: "pagination",
    props: {
      totalSize: 0,
      pageSize: 0,
      nowtIndex: 0,
      isRequested: false
    },
    watch: {
      isRequested(val) {
        let {totalSize, pageSize, nowtIndex} = this.$props;
        this.totalIndex = Math.floor(totalSize / pageSize) + (totalSize % pageSize === 0 ? 0 : 1)
        this.currentIndex = nowtIndex
      }
    },
    mounted() {
      let {totalSize, pageSize, nowtIndex} = this.$props;
      this.totalIndex = Math.floor(totalSize / pageSize) + (totalSize % pageSize === 0 ? 0 : 1)
      this.currentIndex = nowtIndex
    },
    data() {
      return {
        totalIndex: 0,
        currentIndex: 0,
      }
    },
    methods: {
      nextPage() {
        let currentIndex = this.currentIndex
        if (currentIndex === this.totalIndex) {
          return
        }
        this.currentIndex = currentIndex + 1
        this.$emit('pageSizeClick', currentIndex + 1)
      },
      prePage() {
        let currentIndex = this.currentIndex
        if (currentIndex === 1) {
          return
        }
        this.currentIndex = currentIndex - 1
        this.$emit('pageSizeClick', currentIndex - 1)
      },
      sizePage(index) {
        if (index === this.currentIndex) {
          return
        }
        this.currentIndex = index
        this.$emit('pageSizeClick', index)
      }
    }

  }
</script>

<style scoped>
  .pagination {
    display: inline-block;
    margin: 0 3px;
  }

  .pageOpt {
    width: 16px;
    height: 18px;
    line-height: 18px;
    cursor: pointer;
    background: rgba(255, 255, 255, 1);
    border: 0px solid rgba(83, 83, 83, 1);
    border-radius: 3px;
  }

  .active {
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(232, 110, 28, 1);
  }

</style>
